<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <img src="../assets/logo.png" />
        <div class="lab">超级简单杂乱无章的管理系统</div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="lefter">
          <div class="name">{{ userName }}</div>
          <!-- 侧栏 -->

          <!-- :default-active="activePath" -->
          <el-menu
            :default-active="activePath"
            @open="handleOpen"
            active-text-color="#409EFF"
            class="el-menu-vertical-demo"
          >
            <el-submenu v-for="item in menuList" :key="item.id" :index="item.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{item.title}}</span>
              </template>
              
              <el-menu-item
                @click="savePath(its.path)"
                v-for="its in item.list"
                :key="its.ids"
                :index='its.path'
              >{{ its.title }}</el-menu-item>
              
            </el-submenu>
            
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: window.sessionStorage.getItem("userName"),
      activePath: "",
      menuList: [
        {
          id: "1",
          title: "用户管理",
          list: [
            { title: "系统管理", ids: "1", path: "system" },
            { title: "换号审核", ids: "2", path: "change" },
            { title: "签约信息", ids: "3", path: "information" }
          ]
        },
        {
          id: "2",
          title: "产品管理",
          list: [{ title: "私募产品", ids: "2-1", path: "product" }]
        },
        {
          id: "3",
          title: "活动管理",
          list: [{ title: "活动列表", ids: "3-1" }]
        },
        {
          id: "4",
          title: "卡券管理",
          list: [
            { title: "使用记录", ids: "4-1" },
            { title: "卡券列表", ids: "4-2" }
          ]
        },
        {
          id: "5",
          title: "交易管理",
          list: [{ title: "预约记录", ids: "5-1" }]
        },
        {
          id: "6",
          title: "广告管理",
          list: [{ title: "启动页管理", ids: "6-1" }]
        },
        {
          id: "7",
          title: "公告管理",
          list: [{ title: "预约记录", ids: "7-1" }]
        },
        {
          id: "8",
          title: "系统管理",
          list: [{ title: "预约记录", ids: "8-1" }]
        },
        {
          id: "9",
          title: "债权管理",
          list: [{ title: "预约记录", ids: "9-1" }]
        },
        {
          id: "10",
          title: "合作平台",
          list: [{ title: "预约记录", ids: "10-1" }]
        },
        {
          id: "11",
          title: "理财师版内容管理",
          list: [{ title: "预约记录", ids: "11-1" }]
        }
      ]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key--, keyPath--);
    },
    handleClose(key, keyPath) {
      alert("1111");
      console.log(key, keyPath);
    },
    clickTo(link) {
      alert(link)
    },
    savePath(actviePatchs) {
      
      window.sessionStorage.setItem("active", actviePatchs);
      this.$router.push({ name : actviePatchs })
      //this.activePath = activePath
    }
  },
  mounted() {
    
    this.activePath = window.sessionStorage.getItem("active");
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 55px;
  background-color: orange;

  img {
    width: 40px;
    height: 40px;
    border-width: 1px;
    border-radius: 50%;
    border: 1px solid white;
    margin-top: 7.5px;
    float: left;
    margin-right: 5px;
  }

  .lab {
    font-size: 18px;
    color: white;
    line-height: 55px;
  }
}

.lefter {
  background-color: gray;
}
.rows {
  width: 100%;

  .el-menu {
    border-right: none;
  }
}
.func_back :hover {
  background-color: orange;
}
.name {
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  margin-left: 30px;
  color: white;
}

.des {
  height: 20px;
}

.one {
  :active {
    list {
      background-color: aqua;
    }
  }
}
</style>